<template>
  <div>
    <el-dialog
      v-model="visible"
      title="选择指标"
      width="62%"
      :before-close="handleClose"
    >
      <el-container>
        <el-aside width="150px">
          <el-row>
            <el-col 
              class="left-item" 
              :class="{'left-item-active': currentEvaGroup == index}" 
              @click="getEvaItem(index)" 
              v-for="(item,index) in evaGroup" :key="item.id"
            >
              <span class="left-menu-item-title">{{item.title}}</span>
              <span>({{item.count}})</span>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-form class="elForm" :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
            <el-form-item>
              已选择 {{itemCount}} 题
            </el-form-item>
            <el-form-item prop="title">
                <el-input
                  v-model="dataForm.title"
                  placeholder="搜索指标名称"
                  size="medium"
                  class="input"
                  clearable="clearable"
                />
                <el-button 
                  class="search"
                  size="small"
                  @click="searchHandle()" 
                  icon="el-icon-search"></el-button>
            </el-form-item>
          </el-form>
          <el-table
              :data="dataList"
              border
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;"
              size="medium"
              :header-cell-style="{borderColor: 'rgb(235,235,235)',background: 'rgb(247,247,247)'}"
              :cell-style="{padding: '8px 0',borderColor: 'rgb(235,235,235)'}"
              class="elTable"
              ref="dataTable"
              :row-key="getRowKeys"
          >
            <el-table-column
                type="selection"
                :selectable="selectable"
                :reserve-selection="true"
                header-align="center"
                align="center"
                width="50"
            />
            <el-table-column prop="title" label="考核名称" min-width="470"/>
            <el-table-column prop="type" header-align="center" align="center" label="类型" min-width="140" />
            <el-table-column prop="score" header-align="center" align="center" label="分数" min-width="140" />
          </el-table>
          <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="page"
              :page-sizes="[8, 16, 40]"
              :page-size="length"
              :total="totalCount"
              layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </el-main>
      </el-container>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="backBtn" @click="visible = false">取消</el-button>
          <el-button class="btn-color" @click="dataSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['evaItem'],
  data() {
    return {
      visible: false,
      // 指标组
      evaGroup: [],
      page: 1,
      length: 8,
      totalCount: 0,
      dataForm: {
        title: ''
      },
      // 指标项
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      // 当前选中的指标组(左侧)
      currentEvaGroup: -1
    }
  },
  created() {
    this.getEvaGroup()
    this.getEvaItem()
 
  },
  methods: {
    init() {
      this.visible = true
      console.log(this.evaItem);
      // this.keepTicking()
    },
    
    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKeys(row) {
      return row.id
    },
    dataSubmit() {
      this.$emit('refrashData', this.dataListSelections)
      this.visible = false
    },
    // 获取指标组
    getEvaGroup() {
      let data = {
        page: 1,
        length: 10
      }
      this.$http('evaluation/selectEvaluationGroup', 'post', data, false, resp => {
        if (resp.code == 200) {
          let {page} = resp
          let {list} = page
          // console.log(page);
          
          this.evaGroup = list
        }
      })
    },
    // 点击指标组获取对应的指标
    getEvaItem(index=-1,title=null) {      
      let data = {
        page: this.page,
        length: this.length,
        groupId: this.evaGroup[index] ? this.evaGroup[index].id : null,
        title: this.dataForm.title
      }
      this.$http('evaluation/selectEvaluationsBypages', 'post', data, false, resp => {
        if (resp.code == 200) {
          let {page} = resp
          let {list} = page
          // console.log(page);
          
          this.dataList = list
          this.totalCount = page.totalCount
        }
      })
      // 当前选中的指标组
      this.currentEvaGroup = index
    },
    // 查询功能
		searchHandle() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
          this.$refs['dataForm'].clearValidate()
          // 后端接收到''会报错，接收null是代表没有这个条件
					if(this.dataForm.title== '') {
              this.dataForm.title = null
          }
					if(this.page != 1) {
						this.page = 1
          }
					this.getEvaItem()
				} else {
					return false
				}
			})
    },
    // 分页一页数量改变时触发
		sizeChangeHandle(val) {
			this.length = val
			this.page = 1
      this.getEvaItem()
      // this.keepTicking()
		},
		// 分页换页时触发
		currentChangeHandle(val) {
			this.page = val
      this.getEvaItem()
      // this.keepTicking()
    },
    // 选中的指标
    selectionChangeHandle(val) {
      this.dataListSelections = val;
      // console.log(val);
    },
    // 保持打钩状态 (有原生的，白写了，还有点问题)
    keepTicking() {
      // 要等页面加载完后运行
      setTimeout(() => {
        this.dataList.forEach(item => {
          this.$refs.dataTable.toggleRowSelection(item, false)
        })
        this.dataList.forEach(outerItem => {
          this.evaItem.forEach(item => {
            if (outerItem.id == item.id) {
              this.$refs.dataTable.toggleRowSelection(outerItem, true)
            }
          })
        })
      })
    },
  },
  computed: {
    itemCount() {
      return this.dataListSelections.length
    }
  }
}
</script>

<style lang="scss" scoped>
@import './examTemplateAddEva.scss';
</style>